<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one,
        .two,
        .three {
            position: relative;
            display: block;
            width: 600px;
            /* height: 300px; */
            background-color: slateblue;
            margin: 0 auto;
        }
        button{
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            outline: none;
            background-color: slateblue;
        }
    </style>
</head>

<body>
    <div class="one">
        <h1>One</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores ad sapiente accusamus odio iusto quae
            maxime et repellat ut illo commodi necessitatibus, nisi harum laborum molestias est itaque, consequuntur
            vitae nihil nemo. Dolorem voluptatem
            eos odio non, ipsa praesentium culpa, minus eius distinctio iusto dolores! Sed odit sunt eveniet omnis
            cupiditate, itaque eligendi, similique numquam impedit blanditiis necessitatibus totam ea modi autem. Velit
            necessitatibus laborum cum.
            Explicabo ipsam accusantium aperiam asperiores. Doloremque dignissimos molestias, dolorum error aliquid in
            recusandae aliquam repellendus aut suscipit sequi. Earum ut libero dolores, repellat ratione consectetur
            omnis, fuga maiores est in,
            laborum praesentium quo neque!</p>
    </div>
    <div class="two">
        <h1>Two</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, dolore unde soluta sint ea, assumenda,
            voluptatum ipsum eum veritatis omnis quaerat. Quisquam consequuntur quibusdam similique molestiae. Nam qui
            explicabo delectus architecto voluptate
            saepe dolores vero reiciendis porro earum itaque inventore quidem sed maxime vitae iure sint, soluta at ea,
            ratione tempore blanditiis tenetur odit? Doloremque voluptatem explicabo eum libero ducimus molestiae iusto
            quos optio blanditiis!
            Esse cumque officiis nemo itaque non nobis recusandae cum! Quos molestias facilis omnis at aliquid dolore
            aspernatur, porro similique atque perferendis ratione ipsam dolorem commodi, officia odio repellendus cumque
            maxime aut ex, illum voluptates!
            Dolores!
        </p>
    </div>
    <div class="three">
        <h1>Three</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem veniam dolor expedita repudiandae, optio
            consequatur distinctio sapiente voluptas temporibus tempore magnam sit aliquam maiores iure sed
            exercitationem voluptates dolores sunt blanditiis
            autem, quo iste iusto hic. Officiis similique officia excepturi quos, voluptatem possimus laborum id
            doloremque nesciunt impedit dicta aliquam nam velit delectus quia? Saepe numquam iusto laboriosam aliquam
            voluptatum ipsa fuga, eos, iste
            cupiditate itaque ullam! Vero, tempore tenetur placeat deserunt veniam repellendus. Blanditiis nobis, modi
            officia obcaecati vero velit aliquam ex dolore veniam dicta libero quisquam commodi numquam vitae cum minima
            expedita, necessitatibus
            et. Repudiandae sed a mollitia.
        </p>

    </div>
<script>
      var divs = document.querySelectorAll('div');
      var index=0;
      for (var i = 0; i < divs.length; i++) {
            var btn = document.createElement('button');
            // var p=document.querySelectorAll('p');
            btn.innerHTML = 'x';
            btn.setAttribute('data-btn','a'+index);
            divs[i].setAttribute('id','a'+index);
            divs[i].prepend(btn);
            index++;
      }
      document.body.addEventListener('click',function(e){
         var target= e.target;
         if(target.dataset.btn!=undefined){
            var div=document.getElementById(target.dataset.btn);
            div.remove();
            // target.remove();
         }
      })

</script>
</body>

</html>